import React, { useState, useEffect, useRef } from "react";
import { Card, List, NavBar, Search, ProductCard, Stepper, SubmitBar, Badge, Popup } from 'react-vant';
import { SideBar } from 'antd-mobile';
import { useThrottleFn } from 'ahooks';
import { BagO, Bag } from '@react-vant/icons';
import './food.css'
import axios from "axios";
import { useNavigate } from "react-router-dom";
import px2rem from "../uills/px2rem";
export default function App() {

    // const items = [
    //     { key: '1', title: '第一项', text: 'lorem.generateParagraphs(8)' },
    //     { key: '2', title: '第二项', text: 'lorem.generateParagraphs(8)' },
    //     { key: '3', title: '第三项', text: 'lorem.generateParagraphs(8)' },
    //     { key: '4', title: '第四项', text: 'lorem.generateParagraphs(8)' },
    // ];

    const [items, setItems] = useState([])
    const [value, setValue] = useState('');
    const [activeKey, setActiveKey] = useState('1');
    const [value8, setValue8] = useState(1)
    const [state, setState] = useState({
        datalist: [],
        catelist: [],
        carlist: []
    })
    const [popup, setPopup] = useState('')
    const navigate = useNavigate()
    const onClose = () => setPopup('')
    const { run: handleScroll } = useThrottleFn(() => {
        let currentKey = items[0].key;
        for (const item of items) {
            const element = document.getElementById(`anchor-${item.key}`);
            if (!element)
                continue;
            const rect = element.getBoundingClientRect();
            if (rect.top <= 0) {
                currentKey = item.key;
            }
            else {
                break;
            }
        }
        setActiveKey(currentKey);
    }, {
        leading: true,
        trailing: true,
        wait: 100,
    });
    const mainElementRef = useRef(null);

    useEffect(() => {
        const mainElement = mainElementRef.current;
        if (!mainElement)
            return;
        mainElement.addEventListener('scroll', handleScroll);
        return () => {
            mainElement.removeEventListener('scroll', handleScroll);
        };
    }, []);
    const getfood = () => {
        axios.get(`http://localhost:3010/foodlist`).then(res => {
            // console.log(res.data.data);
            setState(prev => ({
                ...prev,
                datalist: res.data.data
            }))

        })
    }
    const getfoodCate = () => {
        axios.get(`http://localhost:3010/foodCatelist`).then(res => {
            // console.log(res.data.data);
            setState(prev => ({
                ...prev,
                catelist: res.data.data
            }))
        })
    }
    useEffect(() => {
        getfood()
        getfoodCate()

    }, [])

    useEffect(() => {
        // console.log(state.catelist,state.datalist);
        if (state.catelist.length && state.datalist.length) {

            const newItems = state.catelist.map(e => ({
                key: e._id,
                title: e.name,
                text: state.datalist.filter(i => i.cid === e._id)
            }));

            // 只有当数据确实变化时才更新
            if (JSON.stringify(newItems) !== JSON.stringify(items)) {
                setItems(newItems);

                // 默认选中第一个分类（只在初次加载时）
                if (!activeKey && newItems.length > 0) {
                    setActiveKey(newItems[0].key);
                }
            }
        }

        // let arr = []
        // let list = []
        // state.catelist.map(e => {
        //     arr.push({ key: e._id, title: e.name, text: state.datalist.filter(i => i.cid == e._id) })
        //     setItems(arr)
        // })
        // console.log(arr, 'arrrrr');
        // state.datalist.map(e=>{d
        //     arr.map(i=>{
        //         if(i.key==e.cid){
        //             list.push(e)
        //         }
        //     })
        // })
        // console.log(list,'list');

    }, [state.datalist, state.catelist])
    // useEffect(() => {
    //     console.log(items, 'items');

    // }, [items])

    const handelAddcar = (e) => {
        if (state.carlist.some(i => i._id == e._id)) {
            console.log(state.carlist);

        } else {
            setState(prev => ({
                ...prev,
                carlist: [...state.carlist, { ...e, num: 1 }]
            }))
        }

    }
    useEffect(() => {
        console.log(state.carlist, 'carlist');
        if (state.carlist.length < 1) {
            setPopup('')
        }
    }, [state.carlist])
    return (
        <>
            <div >
                <NavBar
                    className="foodtop"
                    leftText="返回"
                    onClickLeft={()=>{navigate("/tabber/first")}}
                // onClickLeft={() => Toast('返回')}
                // onClickRight={() => Toast('按钮')}
                />
            </div>
            <div>

                <Search
                    value={value}
                    onChange={setValue}
                    clearable
                    placeholder="搜索商品"
                    shape="round"
                />
            </div>
            <div className="container">
                <div className="side">
                    <SideBar activeKey={activeKey} onChange={key => {
                        var _a;
                        (_a = document.getElementById(`anchor-${key}`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
                    }}>
                        {items.map(item => (<SideBar.Item key={item.key} title={item.title}/>))}
                    </SideBar>
                </div>
                <div className="main" ref={mainElementRef}>
                    {items.map(item => (<div key={item.key}>
                        <h2 id={`anchor-${item.key}`}>{item.title}</h2>

                        {item.text.map((e, index) => {
                            const findflag = state.carlist.find(i => e._id == i._id)
                            return (
                                <ProductCard
                                    key={index}
                                    num={(<>

                                        {!findflag ? <button className="foodbutadd" onClick={() => handelAddcar(e)}><span>+</span></button>
                                            : <Stepper
                                                value={findflag.num}
                                                onChange={val => {
                                                    setState(prev => ({
                                                        ...prev,
                                                        carlist: [...state.carlist.filter(i => i._id == e._id ? i.num = val : i.num)]
                                                    }))
                                                }}
                                                theme='round'
                                                buttonSize='18'
                                                disableInput

                                            />}
                                    </>)}
                                    price={e.price}
                                    desc={e.name}
                                    title={''}
                                    thumb={e.img}
                                />
                            )

                        })}
                    </div>))}

                </div>
                <SubmitBar
                    // style={{}}
                    style={{ zIndex: "9999" }}
                    price={state.carlist.reduce((sum, item) => {
                        // console.log(sum,item);
                        return sum + item.price * 100 * item.num
                    }, 0)}
                    buttonText="提交订单"
                    onSubmit={() => {
                        navigate('/lzworder', { state: { list: state.carlist } })
                    }}
                >
                    {state.carlist.reduce((sum, itme) => {
                        return sum + itme.num
                    }, 0) > 0 ?
                        <Badge content={state.carlist.reduce((sum, itme) => {
                            return sum + itme.num
                        }, 0)}>
                            <Bag style={{ width: px2rem("160px"), height: px2rem("110px") }} color='rgb(0, 148, 255)' onClick={() => { setPopup('bottom') }} />
                        </Badge>

                        : <BagO style={{ width: px2rem("160px"), height: px2rem("110px") }} color='rgb(0, 148, 255)' />
                    }
                </SubmitBar>
                <Popup
                    round
                    visible={popup === 'bottom'}
                    style={{ height: '30%', paddingBottom: "80px" }}
                    position='bottom'
                    onClose={onClose}

                >
                    <p style={{ display: "flex", justifyContent: "space-between", padding: "0 15px",alignItems:"center" }}>
                        <span style={{ fontSize: px2rem("26px") }}>温馨提示：适量点餐</span>
                        <span style={{
                            fontSize: px2rem("28px"),
                            display: "flex",          // 改为 Flex 布局
                            alignItems: "center",     // 垂直居中
                            gap: px2rem("4px"),
                        }}
                            onClick={() => setState(prev => ({
                                ...prev,
                                carlist: []

                            }))}
                        > <svg style={{ width: px2rem("50px"), height: px2rem("50px") }} t="1744283431202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3155" width="200" height="200"><path d="M384 298.666667v-8.533334c0-21.333333 4.266667-34.133333 8.533333-42.666666 4.266667-8.533333 12.8-17.066667 25.6-25.6 8.533333-4.266667 21.333333-8.533333 42.666667-8.533334h102.4c21.333333 0 34.133333 4.266667 42.666667 8.533334 8.533333 4.266667 17.066667 12.8 25.6 25.6 4.266667 8.533333 8.533333 21.333333 8.533333 42.666666V298.666667h149.333333c12.8 0 21.333333 8.533333 21.333334 21.333333s-8.533333 21.333333-21.333334 21.333333h-554.666666c-12.8 0-21.333333-8.533333-21.333334-21.333333s8.533333-21.333333 21.333334-21.333333H384z m42.666667 0h170.666666v-8.533334c0-12.8 0-17.066667-4.266666-21.333333 0-4.266667-4.266667-4.266667-8.533334-8.533333 0-4.266667-8.533333-4.266667-21.333333-4.266667h-102.4c-12.8 0-17.066667 0-21.333333 4.266667-4.266667 0-4.266667 4.266667-8.533334 8.533333-4.266667 0-4.266667 8.533333-4.266666 21.333333V298.666667zM341.333333 405.333333V682.666667c0 34.133333 0 46.933333 4.266667 55.466666 4.266667 8.533333 8.533333 12.8 12.8 17.066667 12.8 12.8 21.333333 12.8 51.2 12.8h209.066667c29.866667 0 38.4 0 46.933333-8.533333 8.533333-4.266667 12.8-8.533333 12.8-17.066667 4.266667-12.8 4.266667-21.333333 4.266667-59.733333V405.333333c0-12.8 8.533333-21.333333 21.333333-21.333333s21.333333 8.533333 21.333333 21.333333v285.866667c0 42.666667-4.266667 55.466667-12.8 72.533333-8.533333 17.066667-17.066667 25.6-34.133333 34.133334-12.8 8.533333-25.6 12.8-64 12.8H409.6c-38.4 0-51.2-4.266667-64-12.8s-25.6-21.333333-34.133333-34.133334c-8.533333-17.066667-12.8-34.133333-12.8-72.533333V405.333333c0-12.8 8.533333-21.333333 21.333333-21.333333s21.333333 8.533333 21.333333 21.333333z m106.666667 21.333334c12.8 0 21.333333 8.533333 21.333333 21.333333v213.333333c0 12.8-8.533333 21.333333-21.333333 21.333334s-21.333333-8.533333-21.333333-21.333334v-213.333333c0-12.8 8.533333-21.333333 21.333333-21.333333z m128 0c12.8 0 21.333333 8.533333 21.333333 21.333333v213.333333c0 12.8-8.533333 21.333333-21.333333 21.333334s-21.333333-8.533333-21.333333-21.333334v-213.333333c0-12.8 8.533333-21.333333 21.333333-21.333333z" p-id="3156"></path></svg>
                            清空购物车
                        </span>
                    </p>

                    {
                        state.carlist.map((e, index) => {
                            return (
                                <>

                                    <ProductCard
                                        key={index}
                                        num={(<>

                                            <Stepper
                                                value={e.num}
                                                onChange={val => {
                                                    setState(prev => ({
                                                        ...prev,
                                                        carlist: [...state.carlist.filter(i => i._id == e._id ? i.num = val : i.num)]
                                                    }))
                                                }}
                                                theme='round'
                                                buttonSize='18'
                                                disableInput

                                            />
                                        </>)}
                                        price={e.price}
                                        desc={e.name}
                                        title={''}
                                        thumb={e.img}
                                    />
                                </>

                            )

                        })
                    }
                </Popup>
            </div >
        </>
    )
}